// 带回显的月选择

<template>
    <div class="v-month-select-div">
        <span @click="show = true">{{date}}
            <van-icon name="arrow-down" />
        </span>

        <!-- <v-month-select v-model="show"
                        @confirm="fnConfirm"></v-month-select> -->

        <van-popup v-model="show"
                   round
                   position="bottom">
            <van-datetime-picker v-model="currentDate"
                                 :type="type"
                                 title="请选择年月"
                                 :max-date="maxDate"
                                 @cancel="show = false"
                                 @confirm="fnConfirm" />
        </van-popup>
    </div>
</template>

<script>
export default {
    props: {
        defValue: {
            type: String,
            default: ''
        },
        type:{
            type:String,
            default:'year-month'
        }
    },
    data () {
        return {
            show: false,
            checkDate: '',
            currentDate: new Date(),
        }
    },
    computed: {
        date () {
            let format='yyyy-MM'
            if(this.type=='date') format='yyyy-MM-dd'
            let checkDate = this.$formatter.formatDate(new Date(),format);
            return this.checkDate || this.defValue || checkDate || '请选择'
        },
        maxDate () {
            let year = new Date().getFullYear()

            return new Date(year, 11)
        }
    },
    methods: {
        fnConfirm (val) {
            let date = new Date(val)
            // month = date.getMonth() + 1

            // if (month < 10) {
            //     month = '0' + month
            // }
            // this.checkDate = date.getFullYear() + '-' + month
            let format='yyyy-MM'
            if(this.type=='date') format='yyyy-MM-dd'
            this.checkDate = this.$formatter.formatDate(date,format);
            this.show = false

            this.$emit('confirm', this.checkDate)
        },
    }
}
</script>

<style lang="less" scoped>
.v-month-select-div {
    flex: 1;
    width: 100%;
    height: 100%;

    > span {
        font-size: 14px;
        font-weight: 400;
        color: #61677a;
        line-height: 20px;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        > .vant-icon {
            margin-left: 6px;
        }
    }
}
</style>
